<template>
	<div class="system-user-move-dept">
		<el-tree
			ref="treeBox"
			:data="dept.list"
			:default-expand-all="expand"
			:props="{
				label: 'name'
			}"
			node-key="id"
			current-node-key="100"
			highlight-current
			@node-click="selectRow"
		>
		</el-tree>
	</div>
</template>

<script>
import { deepTree } from '@/cool/utils/index';
export default {
	name: 'treeGroup',
	props: {
		value: [String]
	},
	data() {
		return {
			dept: {
				list: []
			},
			expand: true
		};
	},
	created() {
		this.getDepartment();
	},
	methods: {
		// 获取组织列表
		async getDepartment() {
			await this.$service.system.dept.list().then(res => {
				this.dept.list = deepTree(res);
			});

			this.current();
		},
		selectRow(e) {
			this.$emit('input', e.id);
		},
		current() {
			this.$refs['treeBox'].setCurrentKey(this.value);
			this.$emit('input', this.value);
		}
	},
	watch: {
		value() {
			this.current();
		}
	}
};
</script>

<style scoped>
.system-user-move-dept {
	border: 1px solid #eee;
	margin-top: 5px;
	padding: 5px;
	border-radius: 3px;
	position: relative;
	top: -8px;
	max-height: 200px;
	overflow: auto;
}
</style>
